<template>
  <!--回馈信息表 -->
  <div>
    <div style="margin-left: 600px; margin-top: 50px">
      <span>回馈一下吧</span>
    </div>
    <div class="box">
      <el-form
        :model="feedbackInformationForm"
        ref="feedbackInformationForm"
        label-width="100px"
      >
        <el-form-item class="recipientId" label="回馈Id">
          <el-input
            v-model="feedbackInformationForm.recipientId"
            placeholder="身份证后六位+收款卡号后四位"
          ></el-input>
        </el-form-item>
        <el-form-item class="share" label="说点什么吧">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="feedbackInformationForm.usingText"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="图片">
          <div style="width: 200px">
            <img width="100%" :src="imgSrc" />
          </div>
        </el-form-item>
        <el-form-item>
          <input type="button" id="btn" value="点击上传图片" />
          <input
            id="img"
            style="opacity: 0"
            type="file"
            @change="showImg($event)"
            ref="file"
            name="file"
          />
          <div>{{ fileName }}</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSubmit()">提交</el-button>
          <el-button @click="resetForm('feedbackInformationForm')"
            >重置</el-button
          >
          <el-button @click="toRouter('/profile/msg')">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { feedbackInformation } from "network/charity.js";
export default {
  data() {
    return {
      file: "",
      fileList: { name: "", url: "" },
      edit: true,
      fileName: "",
      imgSrc: "",
      feedbackInformationForm: {
        recipientId: "",
        usingText: "",
      },
      id: "",
      props: { multiple: true },
      options: [
        {
          value: 1,
          label: "物品",
          children: [],
        },
        {
          value: 2,
          label: "款项",
          children: [],
        },
      ],
    };
  },
  methods: {
    //路由跳转
    toRouter(path) {
      this.$router.push(path);
      this.publishInformation();
    },
    updateFile(event) {
      console.log("file对象为：");
      console.log(event.target.files);
      this.file = event.target.files;
    },
    // 封装formData
    toSubmit() {
      this.id = this.feedbackInformationForm.recipientId;
      let file = this.file;
      let formData = new FormData();
      formData.append("recipientId", this.id);
      formData.append("usingText", this.feedbackInformationForm.usingText);
      formData.append("file", this.feedbackInformationForm.file);
      feedbackInformation(formData).then((res) => {
        console.log(res);
      });
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    showImg(e) {
      // 显示图片
      let file = e.target.files[0];
      this.imgSrc = window.URL.createObjectURL(file);
      this.fileName = file.name;
      this.feedbackInformationForm.file = file;
    },
  },
};
</script>
<style scoped>
#img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.box {
  width: 50%;
  margin-top: 20px;
  padding: 20px;
  margin-left: 330px;
  border: 2px solid rgb(241, 163, 111);
  background-color: rgb(240, 212, 186);
}
.el-textarea__inner {
  width: 200px;
}
</style>
